import "./searchPage.less";
import { useEffect, useRef, useState } from "react";
import { useLocation, useNavigate } from "react-router-dom";
import MySearchBar from "@/components/MySearchBar";
import Listmeta from "./listmeta";
import { PageHeader } from "@/components";
import { getGuide, getSearch } from "../../../service";
import { message, Spin } from "antd";
import { Toast } from "antd-mobile";

export default function SearchPage() {
  const navigate = useNavigate();
  const location = useLocation();
  const searchRef = useRef(null);
  const [searchValue, setSearchValue] = useState<undefined | string>();
  const [likeKey, setLikeKey] = useState<string | number>();
  const [panelData, setPanelData] = useState([]);
  const [listData, setListData] = useState([]);
  const [latLng, setLatLng] = useState([]);
  const [loaing, setLoaing] = useState(true);

  const getGuideList = async () => {
    try {
      const res = await getGuide();
      setPanelData(res?.data);
    } catch (error) {
      console.log(error);
    }
  };
  const getListData = async (value?: any) => {
    try {
      const res = await getSearch({
        Typename: value === "" ? "" : searchValue,
        pid: likeKey === "all" ? "" : likeKey,
        lat: latLng[0],
        lng: latLng[1],
      });
      if (res && res?.success) {
        setListData(res?.data);
        setLoaing(false);
      } else {
        Toast.show(res?.msg);
        setLoaing(false);
      }
    } catch (error) {
      console.error(error);
    }
  };

  useEffect(() => {
    setLikeKey(location?.state?.type);
    setLatLng(location?.state?.latlng);
    getGuideList();
  }, []);
  useEffect(() => {
    if (likeKey && latLng?.length > 0) {
      if (latLng?.[0] && latLng?.[1]) {
        getListData();
      } else {
        message.warning("未获取当前位置！");
      }
    }
  }, [likeKey, latLng]);

  return (
    <div className="Guide_SearchPage">
      <div className="header-bg"></div>
      <PageHeader title="" goback={() => navigate("/lifeCircle/guide")} />

      <div className="Guide_SearchPage_content">
        {/* 搜索框 */}
        <div className="gsc_search">
          <MySearchBar
            searchValue={searchValue}
            setSearchValue={setSearchValue}
            searchRef={searchRef}
            onSearch={(v: any) => getListData(v)}
          />
        </div>

        {/* 猜你喜欢 */}
        <div className="gsc_like">
          <div className="guessLike">猜你想搜</div>
          <div className="likeList">
            {panelData?.length > 0 &&
              panelData?.map((item: any) => {
                return (
                  <div
                    className={`likeList_meta ${
                      likeKey == item?.id ? "likeList_meta_active" : ""
                    }`}
                    onClick={() => {
                      setLikeKey(likeKey == item?.id ? "" : item?.id);
                      setSearchValue("");
                    }}
                    key={item?.id}
                  >
                    {item?.appTypeName}
                  </div>
                );
              })}
          </div>
        </div>

        {/* 列表 */}
        <div className="gsc_list">
          {listData?.length > 0 &&
            listData?.map((item: any, index: number) => {
              return (
                <Listmeta
                  data={item}
                  key={`gsc_list_${index}`}
                  onClick={() =>
                    navigate(`guidelocation`, {
                      state: { data: item, type: likeKey, latlng: latLng },
                    })
                  }
                />
              );
            })}

          <div
            style={{
              width: "100%",
              height: 120,
              display: "flex",
              justifyContent: "center",
              alignItems: "center",
            }}
          >
            <Spin
              tip="加载中..."
              size="large"
              spinning={loaing}
              style={{ zoom: 2 }}
            ></Spin>
          </div>
        </div>
      </div>
    </div>
  );
}
